<!-- 用途： 用于支持字符串和数字类型的输入，同时进行数据转换 -->
<script setup>
import {onMounted, ref} from "vue";

const props = defineProps({
  data: {
    type: [String,Number],
  },
  inputWidth: {
    type: String,
    default: '60px',
  },
  placeholder: {
    type: String,
    default: "请输入内容",
  },
  // 判断是否需要默认值
  defaultValue: {
    type: [String,Number],
    default: '25%',
  }
})
let inputData=ref()
const emits = defineEmits(['update:data'])
const inputChanged =()=>{
  emits('update:data',Number(inputData.value)?Number(inputData.value):inputData.value);
}

onMounted( ()=>{
  if(props.data === '' || props.data == null){
    inputData.value=props.defaultValue
  }else {
    inputData.value = props.data
  }
})
</script>

<template>
  <el-input v-model.trim="inputData"  :placeholder="props.placeholder" :style="{width: props.inputWidth}"  @change="inputChanged()"/>
</template>

<style scoped>

</style>